import React, { Component } from 'react'

export default class List extends Component {
  render() {
    return (
      <div className='comment-list'>
        <div className='list-item'>
          <div className='user-face'>
            <img
              className='user-head'
              src='https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000'
              alt=''
            />
          </div>
          <div className='comment'>
            <div className='user'>刘德华</div>
            <p className='text'>给我一杯忘情水</p>
            <div className='info'>
              <span className='time'>2021-10-10 09:09:00</span>
              <span className='like liked'>
                <i className='icon'></i>
              </span>
              <span className='hate'>
                <i className='icon'></i>
              </span>
              <span className='reply btn-hover'>删除</span>
            </div>
          </div>
        </div>
        <div className='list-item'>
          <div className='user-face'>
            <img
              className='user-head'
              src='https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000'
              alt=''
            />
          </div>
          <div className='comment'>
            <div className='user'>周杰伦</div>
            <p className='text'>听妈妈的话</p>
            <div className='info'>
              <span className='time'>2021-10-11 09:09:00</span>
              <span className='like'>
                <i className='icon'></i>
              </span>
              <span className='hate'>
                <i className='icon'></i>
              </span>
              <span className='reply btn-hover'>删除</span>
            </div>
          </div>
        </div>
        <div className='list-item'>
          <div className='user-face'>
            <img
              className='user-head'
              src='https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000'
              alt=''
            />
          </div>
          <div className='comment'>
            <div className='user'>陈奕迅</div>
            <p className='text'>十年</p>
            <div className='info'>
              <span className='time'>2021-10-11 10:09:00</span>
              <span className='like'>
                <i className='icon'></i>
              </span>
              <span className='hate hated'>
                <i className='icon'></i>
              </span>
              <span className='reply btn-hover'>删除</span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}